<template>
  <div>

     <div class="dispatch_car" style=" width: 300px; border:none; padding:0  ">
     <div class="tubde"><img src="../../../../static/images/jtde.png" alt  style=" position: absolute; bottom:-8px; left:50%; margin-left:-7px;z-index:68; display:none;"  /></div>

     <div  class="dish_car" style="background: white; max-height: 240px; overflow-y: auto; padding:10px 12px 0px 12px; box-shadow:0px 0px 9px 1px rgba(13,13,13,0.15); z-index:88" >
      <div class="dispatch_car_top">
        <h1>
          {{car.tractorNumber}}<font> ▪ {{car.trailerNumber ? car.trailerNumber : ''}}</font>
          <span v-if="car.isSelfOperation === 1">自</span>
          <span v-if="car.isSelfOperation === 0">外</span>
          <i v-if="car.gpsooInfo && car.gpsooInfo.device_info_new === 0" class="cor1"></i>
          <i v-if="car.gpsooInfo && car.gpsooInfo.device_info_new === 3" class="cor3"></i>
          <i v-if="car.gpsooInfo && car.gpsooInfo.device_info_new === 4" class="cor4"></i>
        </h1>
        <p>状态：{{deviceStatusStr}}</p>
        <p>地址：{{ address || '未获取到' }}</p>
      </div>

      <div class="dispatch_car_cen">
        <ul v-if="car.orderList && car.orderList.length > 0">
          <li v-for="(v, i) in car.orderList" :key="i">
            <font style="cursor: pointer;" @click="openOrder(v.truckOrderId)">{{v.truckOrderCode}}</font>{{opeTypeStr(v.opeType)}}
          </li>
        </ul>
        <ul v-if="!car.orderList || car.orderList.length === 0">暂无数据</ul>
        <h2 v-if="operate">
          <a @click="dispatchIt">派单</a>
          <template v-if="car.isSelfOperation===1">
            <a @click="trackIt">跟踪</a>
            <a @click="playback">回放</a>
          </template>
        </h2>
      </div>
     </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import {GD_KEY} from '@/common/config'
import {mixin} from './common'
export default {
  name: 'car-mapInfo',
  mixins: [mixin],
  props: {
    car: Object,
    operate: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      GD_KEY,
      deviceStatusStr: '',
      orderList: [],
      address: null
    }
  },
  methods: {
    playback () {
      this.$emit('operateCar', 'playback')
    },
    dispatchIt () {
      this.$emit('operateCar', 'dispatch')
    },
    trackIt () {
      this.$emit('operateCar', 'track')
    },
    openOrder (truckOrderId) {
      window.open(`/landCenter/orderDispatch/${truckOrderId}`, '_blank')
    },
    getAddressString (info) {
      this.address = null
      // 根据经纬度获得详细地址
      if (info && info.gpsooInfo) {
        let _this = this
        AMapLoader.load({
          'key': this.GD_KEY,
          'version': '2.0',
          'plugins': ['AMap.Geocoder']
        }).then((AMap) => {
          var lnglatXY = [info.gpsooInfo.lng, info.gpsooInfo.lat] // 地图上所标点的坐标
          const geocoder = new AMap.Geocoder({})
          geocoder.getAddress(lnglatXY, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
              _this.address = result.regeocode.formattedAddress
            }
          })
        })
      }
    }
  },
  watch: {
    car () {
      let deviceStatus = ''
      if (this.car.gpsooInfo) {
        this.getAddressString(this.car)
        if (this.car.gpsooInfo.device_info_new === 0) {
          deviceStatus += `行驶中（${this.car.gpsooInfo.speed}km/h）`
        } else if (this.car.gpsooInfo.device_info_new === 3) {
          deviceStatus += `离线（${Math.floor((new Date().getTime() / 1000 - this.car.gpsooInfo.sys_time) / 3600 * 100) / 100}小时）`
        } else if (this.car.gpsooInfo.device_info_new === 4) {
          deviceStatus += `静止（${Math.floor((new Date().getTime() / 1000 - this.car.gpsooInfo.sys_time) / 3600 * 100) / 100}小时）`
        }
      }
      this.deviceStatusStr = deviceStatus
    }
  }
}
</script>

<style>
.amap-icon { margin-top: 15px;}
.tubde{position: absolute;
    display: block;
    width: 8.48528137px;
    height: 8.48528137px;
    background: transparent;
    border-style: solid;
    border-width: 4.24264069px;
    transform: rotate(45deg);
     bottom: -4.8px;
    border-color: transparent #fff #fff transparent;
    box-shadow: 3px 3px 7px rgba(0,0,0,.07);
    left: 50%;
    transform: translateX(-50%) rotate(45deg);}
</style>
